TreeGrid Paging Tutorial
1. Client root paging
Automatic paging of root rows on client side
-
Client root paging distributes all root rows into root pages.
Client root paging has no effect on child rows in tree.
Client root paging is automatically done by TreeGrid and does not require any work on server.
The client root paging is controlled by Cfg attribute Paging
, values 1 or 2 and AllPages
, values 0 or 1:
-
Pages rendered on demand, set by Paging='2'.
The pages are rendered only if they are scrolled to view for given time. The time is set PageTime attribute, default is 200 ms.
It can be used for grids with rows about 500 ~ 20,000.
-
All pages are rendered on start, set by Paging='1'.
The advantage to no paging setting (Paging='0') is the pages are rendered on background and a user can cancel the rendering and switch to Paging='2'.
Also it supports pagers for better navigation.
It can be used for grids with rows about 500 ~ 2,000.
-
Only one page is shown at a time, set by AllPages='0' and Paging='2'.
It is standard paging widely used on internet, the page can be switched only from pager, not by scrollbar.
It can be used for grids with rows about 500 ~ 20,000.
-
The pages are created on grid loading and also re-created after any sorting, filtering or grouping.
The size of page is set by Cfg attribute PageLength
. It is specifies count of root row at one page when creating pages.
The count can differ, when some row is added or deleted and at the last page.
-
When there are too many pages rendered, the grid slows down. To solve this problem the unused pages are cleared after some time.
Cfg attribute MaxPages specifies how many pages can be rendered in grid at one time.
If the count of rendered pages exceeds this limit, the oldest (not shown) pages are cleared.
-
TreeGrid provides three built in pagers:
-
Right side pager
The pager is defined by special root tag <Pager>.
This pager is shown on grid right side and shows page names according to the actual sorting.
If there is no active sorting in grid, it shows captions Page 1 - Page XX.
The page name is built from the first and last row in the page, from cell values in sorting columns.
The cell values are abbreviated on position they differ from values in the last row in previous page and the first row on next page.
It is possible to specify the cell value used in pager name instead of actual value by attribute PageNameValue.
The right side pager has similar attribute to the standard column and can be also resized or hidden.
-
Pager with navigation buttons
It is Space cell of Type='Pager'. It shows standard buttons First, Prev, Next, Last and cell to edit page number.
It creates new Space cells named PagerFirst, PagerPrev, PagerEdit, PagerNext, PagerLast, in that order. It is also possible to set attributes for these cells like PagerEditWidth='70'.
This pager can be displayed in any space row, e.g. on Toolbar.
-
List of page links
It is Space cell of Type='Pages'. It shows all pages as numbers with links to show the page.
It can show all the page links, optionally with horizontal scrollbar, depending also on Wrap attribute.
Or it can show only nearest pages to actual page (set by Count attribute) and optionally the rest pages in steps set by Step attribute.
The display of the page links (the numbers) can be changed by API by OnGetPageNumber event.
This pager can be displayed in any space row, e.g. on Toolbar, usually with RelWidth='1' to accommodate as much space as possible.
Custom pagers
There are also various API methods for paging to let developers to build their custom pager.
Especially GoToPage, GoToNextPage and GoToPreviousPage methods.
For more information see Paging documentation.